<template>
  <basic-dialog
    :visible="show"
    title="暂停明细"
    isShowClose
    :min-width="'800px'"
    @close="$emit('close', false)"
  >
    <div class="page-content padding-b-20 padding-t-20">
      <q-table
        :data="tableData"
        :columns="columns"
        row-key="id"
        class="myTable scroll inherit"
        style="margin: 0 20px;max-height: 380px"
        :pagination.sync="pagination"
        :hide-bottom="tableData.length !== 0"
        :loading="isTableLoading"
        color="primary"
      />
    </div>
  </basic-dialog>
</template>

<script>
export default {
  name: 'pause-count-dialog',
  props: {
    show: Boolean,
    timeRecords: Array
  },
  data () {
    return {
      data: {},
      columns: [
        { name: 'index', label: '序号', field: 'index', align: 'left' },
        { name: 'startTime', label: '暂停开始时间', field: 'startTime', align: 'left' },
        { name: 'endTime', label: '暂停结束时间', field: 'endTime', align: 'left' },
        { name: 'pauseTime', label: '暂停时长', field: 'pauseTime', align: 'left' }
      ],
      tableData: [],
      // 表格分页配置
      pagination: {
        // 总条数
        rowsNumber: 0
      },
      isTableLoading: false
    }
  },
  watch: {
    show (newPro) {
      newPro && this.getList()
    }
  },
  methods: {
    getList () {
      this.tableData = []
      this.isTableLoading = true
      setTimeout(() => {
        this.tableData = this.timeRecords.map((v, i) => {
          return {
            ...v,
            index: i + 1,
            startTime: this.$utils.setDateOSI(v.startTime, false, 'YYYY-MM-DD HH:mm:ss'),
            endTime: this.$utils.setDateOSI(v.endTime, false, 'YYYY-MM-DD HH:mm:ss')
          }
        })
        this.isTableLoading = false
      }, 1000)
    }
  }
}
</script>

<style scoped lang="stylus"></style>
